<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/20 0020
  Time: 10:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>layUi入门</title>
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <!-- 你的HTML代码 -->

    <script src="../layui/layui/layui.js"></script>
    <script type="text/html" id="roleToolBar">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i
                class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
        <input type="text" id="userName" style="width:200px;float:right;height:30px;" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </script>
    <style type="text/css">
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

    <script type="text/javascript">

        layui.use(['element', 'form', 'table', 'layer', 'laydate','tree','util'], function () {
            var layer = layui.layer;

            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var formSelects = layui.formSelects;
            var laydate = layui.laydate;
            var tree = layui.tree
                ,util = layui.util;
            //加载角色的表格
            table.render({
                elem: '#roleTable',
                url: '../RoleServlet?method=selectRole',
                page: true,
                height: 651,
                toolbar:"#demoTableId",
                //toolbar: '#save',//显示在表头的工具条
                minLength:80,
                cols: [[
                    {
                        field: 'roleId',
                        align: 'center',
                        title: '角色ID',
                        style: 'color: #01BDF4;'
                    }, {
                        field: 'roleName',
                        align: 'center',
                        title: '角色名称',

                    },
                    {
                        fixed : 'right',
                        title : '操作',
                        toolbar : '#barDemo',//绑定一个工具条
                        width : 200
                    }
                ]]
            });
            //给工具条的按钮添加事件
            table.on('tool(roleTable)',function (obj) {
                var data=obj.data;
                var permList;
                var dataRoleId=data.roleId;
                switch (obj.event) {
                    case 'edit':

                        var index=layer.open({
                            type: 1,
                            area:["400px","500px"],
                            title: '编辑权限',
                            closeBtn: 1,
                            move:false,
                            content:$("#editTree"),
                            btn:[]
                        });


                        $.ajax({
                            url:'../RoleServlet?method=editRole&roleId='+data.roleId,
                            dataType:'json',
                            type:'post',
                            success:function(data){
                                //基本演示
                                tree.render({
                                    elem: '#funTree'
                                    ,data: data
                                    ,showCheckbox: true  //是否显示复选框
                                    ,id: 'id'
                                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                                    ,click: function(obj){
                                        var data = obj.data;  //获取当前点击的节点数据
                                    }
                                });
                                //按钮事件
                                util.event('lay-demo', {
                                    getChecked: function(othis){
                                        var checkedData = tree.getChecked('id'); //获取选中节点的数据
                                        var treecheckdata  = tree.getChecked('id');
                                        var nodeIds = new Array();
                                        nodeIds = getCheckedId(treecheckdata);
                                        // 测试
                                        permList = nodeIds;
                                        $.ajax({
                                            url:"../RoleServlet",
                                            type:"POST",
                                            data:"method=updateRoleRight&parmList="+permList+"&roleId="+dataRoleId,
                                            success:function(data){
                                                layer.close(index);
                                            }
                                        });

                                        // 获取选中节点的id
                                        function getCheckedId(jsonObj) {
                                            var id = "";
                                            $.each(jsonObj, function (index, item) {
                                                if (id != "") {
                                                    id = id + "," + item.id;
                                                }
                                                else {
                                                    id = item.id;
                                                }
                                                var i = getCheckedId(item.children);
                                                if (i != "") {
                                                    id = id + "," + i;
                                                }
                                            });
                                            return id;
                                        }
                                    }
                                    ,setChecked: function(){
                                        tree.setChecked('funTree', [3, 9]); //勾选指定节点
                                    }
                                    ,reload: function(){
                                        tree.reload();
                                    }
                                });
                            }
                        });
                        break;
                }
            });
            var closeDiv;
            //判断点击的是添加还是批量删除
            table.on("toolbar(roleTable)",function (data) {
                //判断点击的是添加
                if (data.event=="add"){
                    //调出窗口
                    closeDiv=layer.open({
                        type:1,
                        title:"增加内容",
                        offset: 'auto',
                        area:["500px","300px"],
                        content:$("#MaxDiv").html()
                    });
                };
            });

            //判断点击的是修改还是增加
            form.on("submit(okkFilter)",function(data){
                //拿到jQuery元素
                var elem=$("#okk").text();
                //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
                //alert(elem.text());
                if (elem=="确认"){//判断点击的为增加
                    //将数据发送到服务器端
                    $.ajax({
                        type:"POST",
                        url:"../RoleServlet?method=addRole",
                        data:"roleName="+data.field.roleName,
                        dataType:"text",
                        success:function(data){
                            if (data=="ok"){
                                layer.msg("添加成功");
                            }else{
                                layer.msg("添加失败");
                                //不跳转
                                return false;
                            }
                        }
                    });
                    //清空表单框
                    $("#mainForms")[0].reset();
                    //关闭窗口
                    layer.close(closeDiv);
                    //不跳转
                    //return false;
                }
            });


        });

    </script>
</head>
<body style="overflow: auto; background-color: white;"
      class="layui-view-body layui-content">
    <div>
        <blockquote class="layui-elem-quote news_search">
        <!--表格-->
        <table id="roleTable" lay-filter="roleTable"></table>
            <%--头部工具栏--%>
            <div class="demoTable" id="demoTableId" hidden="true">
                <form class="layui-form">
                    <div>
                        <a href="javascript:;" class="layui-btn layui-btn-radius layui-icon layui-icon-add-circle "  lay-event="add" style="font-size: 20px;font-family: 微软雅黑;" lay-event="add">新增角色</a>
                    </div>
                </form>
            </div>
        </blockquote>
        <!--编辑权限的窗口-->
        <div id="editTree" hidden="true">
            <form class="layui-form" id="mainForm" method="post" lay-filter="classManagerForm">
                <div class="layui-form-item">
                    <div id="funTree" lay-filter="funTree">
                        <%--树--%>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-left: 100px;">
                    <button class="layui-btn" lay-demo="getChecked" lay-submit lay-filter="save" id="save">保存</button>
                </div>
            </form>

        </div>

        <!--工具条-->
        <div style="display: none;" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit"  style="width: 100px;height: 30px;font-size: 17px;"><i
                    class="layui-icon">&#xe642;</i>编辑权限</a>
        </div>


        <%--添加弹出对话框--%>
        <div hidden="true" id="MaxDiv">
            <div style="margin-top: 50px;margin-left: 20px;">
                <form class="layui-form" id="mainForms" method="post" lay-filter="classManagerForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="roleName"  lay-verify="required"  style="width: 300px;" id="stopText"   placeholder="--输入角色名称--" autocomplete="off" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-top:30px;">
                        <div class="layui-input-block">
                            <button class="layui-btn   " style="margin-left: 40px;font-size: 15px;font-family: 微软雅黑;"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                            <button type="reset" class="layui-btn layui-btn-warm" style="font-size: 15px;font-family: 微软雅黑;">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
